<template>
  <div class="common-wrap">
    <div class="cost" style="display: flex; flex-direction: column">
      <div style="margin-bottom: 10px">
        <el-segmented
          style="width: 200px"
          v-model="segmentedValue"
          :options="segmentedOptions"
          size="default"
        />
      </div>
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :porpModel="true"
        labelWidth="120"
        :saveBtnLoading="saveBtnLoading"
        @submit="onSubmit"
      >
      </MyForm>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import i18n from "@/lang/index.js";
import * as api from "@/api/index.js";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { columnFilters, multiply } from "@/utils/mUtils.js";
const router = useRoute();
const formData = ref({});
const formColumns = ref([
  {
    title: "费用信息",
    structure: [
      {
        title: "应收",
        type: "tabel",
        prop: "receivableList",
        tableIndex: 0,
        height: 300,
        columns: [
          {
            type: "checkbox",
            width: 50,
            fixed: "left",
            align: "center",
          },
          {
            field: "feeName",
            title: "费用名称",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "unit",
            title: "计量单位",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "currencyCode",
            title: "币种",
            editRender: {},
            params: {
              options: [],
              change: (val, rowIndex, row, options) => {
                row.currency = val.option.label;
              },
              key: "subName",
              value: "subCode",
              label: "subName",
              transfer: true,
            },
            slots: { edit: "select_edit" },
            formatter: ({ cellValue, row }) => {
              return row.currency;
            },
          },
          {
            field: "price",
            title: "单价",
            editRender: {},
            slots: { edit: "input_edit" },
            params: {
              type: "number",
              precision: 2,
              handleChange: (val, row) => {
                row.originalCurrencyAmount = multiply(
                  row.price || 0,
                  row.quantity || 0
                );
              },
            },
          },
          {
            field: "quantity",
            title: "数量",
            editRender: {},
            slots: { edit: "input_edit" },
            params: {
              type: "number",
              precision: 6,
              handleChange: (val, row) => {
                row.originalCurrencyAmount = multiply(
                  row.price || 0,
                  row.quantity || 0
                );
              },
            },
          },
          {
            field: "originalCurrencyAmount",
            title: "原币金额",
          },
          {
            field: "exchangeRate",
            title: "汇率",
            editRender: {},
            slots: { edit: "input_edit" },
            params: {
              type: "number",
              precision: 6,
            },
          },
          {
            field: "cnyAmount",
            title: "人民币金额",
          },
          {
            field: "paymentMethodCode",
            title: "付款方式",
            editRender: {},
            params: {
              options: [],
              change: (val, rowIndex, row, options) => {
                row.paymentMethodName = val.option.label;
              },
              key: "subName",
              value: "subCode",
              label: "subName",
              transfer: true,
            },
            slots: { edit: "select_edit" },
            formatter: ({ cellValue, row }) => {
              return row.paymentMethodName;
            },
          },
          {
            field: "remark",
            title: "备注",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "status",
            title: "状态",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "billNumber",
            title: "账单编号",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "createTime",
            title: "录入时间",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "createByName",
            title: "录入人",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "reviewStatus",
            title: "审核状态",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "reviewerName",
            title: "审核人",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "authSiteName",
            title: "业务所属公司",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "customerNameZh",
            title: "委托单位",
            editRender: {},
            slots: { edit: "input_edit" },
          },
        ],
        editRules: {},
        multipleSelection: [],
        buttonType: ["add", "delete"],
        batchDelete: true,
        keepSource: true,
        changeEditNeedTrigger: false,
        keepSourceKey: "feeName",
        tableId: "receivableList",
      },
      {
        title: "应付",
        type: "tabel",
        prop: "payableList",
        tableIndex: 0,
        height: 300,
        columns: [
          {
            type: "checkbox",
            width: 50,
            fixed: "left",
            align: "center",
          },
          {
            field: "feeName",
            title: "费用名称",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "unit",
            title: "计量单位",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "currencyCode",
            title: "币种",
            editRender: {},
            params: {
              options: [],
              change: (val, rowIndex, row, options) => {
                row.currency = val.option.label;
              },
              key: "subName",
              value: "subCode",
              label: "subName",
              transfer: true,
            },
            slots: { edit: "select_edit" },
            formatter: ({ cellValue, row }) => {
              return row.currency;
            },
          },
          {
            field: "price",
            title: "单价",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "quantity",
            title: "数量",
            editRender: {},
            slots: { edit: "input_edit" },
            params: {
              type: "number",
              precision: 2,
            },
          },
          {
            field: "originalCurrencyAmount",
            title: "原币金额",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "exchangeRate",
            title: "汇率",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "cnyAmount",
            title: "人民币金额",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "paymentMethodCode",
            title: "付款方式",
            editRender: {},
            params: {
              options: [],
              change: (val, rowIndex, row, options) => {
                row.paymentMethodName = val.option.label;
              },
              key: "subName",
              value: "subCode",
              label: "subName",
              transfer: true,
            },
            slots: { edit: "select_edit" },
            formatter: ({ cellValue, row }) => {
              return row.paymentMethodName;
            },
          },
          {
            field: "remark",
            title: "备注",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "status",
            title: "状态",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "billNumber",
            title: "账单编号",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "createTime",
            title: "录入时间",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "createByName",
            title: "录入人",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "reviewStatus",
            title: "审核状态",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "reviewerName",
            title: "审核人",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "authSiteName",
            title: "业务所属公司",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "customerNameZh",
            title: "委托单位",
            editRender: {},
            slots: { edit: "input_edit" },
          },
        ],
        editRules: {},
        multipleSelection: [],
        buttonType: ["add", "delete"],
        batchDelete: true,
        keepSource: true,
        changeEditNeedTrigger: false,
        keepSourceKey: "feeName",
        tableId: "payableList",
      },
    ],
  },
]);
const rules = ref({});
const segmentedValue = ref("应收");
const segmentedOptions = ref(["应收", "应付"]);
const saveBtnLoading = ref(false);
onMounted(() => {});
const getInfo = () => {
  saveBtnLoading.value = true;
  const fun =
    segmentedValue.value === "应收"
      ? api.default.order.maritimeAdministrationReceivable.list
      : api.default.order.maritimeAdministrationPayable.list;
  fun({
    pageSize: 1000,
    orderId: router.query.id,
  })
    .then((res) => {
      if (segmentedValue.value === "应收") {
        formData.value = {
          receivableList: res.rows,
        };
      } else {
        formData.value = {};
      }
    })
    .finally(() => {
      saveBtnLoading.value = false;
    });
};
watch(
  () => segmentedValue.value,
  (val) => {
    if (val === "应收") {
      columnFilters(formColumns.value, "receivableList").hide = false;
      columnFilters(formColumns.value, "payableList").hide = true;
    } else {
      columnFilters(formColumns.value, "receivableList").hide = true;
      columnFilters(formColumns.value, "payableList").hide = false;
    }
    getInfo();
  },
  {
    immediate: true,
  }
);
const onSubmit = () => {
  let fun = null;
  let arr = [];
  if (segmentedValue.value === "应收") {
    fun = api.default.order.maritimeAdministrationReceivable.batchSaveOrUpdate;
    arr = formData.value.receivableList;
  } else {
    fun = api.default.order.maritimeAdministrationPayable.batchSaveOrUpdate;
    arr = formData.value.payableList;
  }
  saveBtnLoading.value = true;
  fun(arr)
    .then((res) => {
      ElMessage.success(i18n.global.t("修改成功"));
      saveBtnLoading.value = false;
    })
    .catch(() => {
      saveBtnLoading.value = false;
    });
};
</script>

<style scoped lang="scss">
.cost {
  height: 100%;
}
.el-segmented__item-selected {
  background: #0070ff;
}
</style>